<!--
 * @Description: Description
 * @Author: wangshaokang
 * @Date: 2024-07-18 14:48:49
 * @LastEditors: wangshaokang
 * @LastEditTime: 2024-07-18 20:43:20
-->
<template>
	<div class="vantPicker">
		<van-field
			class="star"
			v-model="fieldValue"
			:label="label"
			:placeholder="placeholder"
			:required="required"
			clearable
			is-link
			readonly
			input-align="left"
			@click="handleFieldClick"
			:rules="checkrule"
		/>
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker v-if="pickerType!=='datePicker'" :columns="columns" input-align="right" @cancel="handlePickerCancel" @confirm="handlePickerConfirm" />
      <van-date-picker v-if="pickerType==='datePicker'" @cancel="handlePickerCancel" @confirm="handlePickerConfirm" />
		</van-popup>
	</div>
</template>

<script setup>
	import { ref, watch } from "vue";
	/**
	 *	modelLabel：父组件选中的label
	 * 	modelValue：父组件选中的code
	 * 	columns:picker数据
	 *	label:选择器的label
	 *	placeholder:选择器的placeholder
	 *	required:是否必录项
	 */
	const props = defineProps({
    pickerType: {
      type: String,
      default: "",
    },
		modelLabel: {
			type: String,
			default: "",
		},
		modelValue: {
			type: String,
			default: "",
		},
		columns: {
			type: Array,
			default: () => [],
		},
		label: {
			type: String,
			default: "",
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		required: {
			type: Boolean,
			default: false,
		},
		name: {
			type: String,
			default: "",
		},
		checkrule: {
			type: Array,
			default: () => [],
		},
	});
	const emit = defineEmits(["update:modelLabel", "update:modelValue"]);
	const showPicker = ref(false);
	const fieldValue = ref(props.modelLabel);
	const pickerType = ref(props.pickerType);
	watch(
		() => props.modelLabel,
		(newValue) => {
			fieldValue.value = newValue;
		},
		{ deep: true, immediate: true }
	);
	// 确定
	const handlePickerConfirm = (value) => {
    console.log("[VantPicker]handlePickerConfirm",pickerType.value,value);
    if (pickerType.value==='datePicker'){
      fieldValue.value = value.selectedValues.join('-');
      emit("update:modelLabel", value.selectedValues);
      emit("update:modelValue", value.selectedValues);
    }else if (pickerType.value==='multiplePicker'){
      fieldValue.value = value.selectedValues.join('-');
      emit("update:modelLabel", value.selectedValues);
      emit("update:modelValue", value.selectedValues);
    }else {
      fieldValue.value = value.selectedOptions[0].text;
      emit("update:modelLabel", value.selectedOptions[0].text);
      emit("update:modelValue", value.selectedOptions[0].value);
    }
		showPicker.value = false;
	};
	// 取消
	const handlePickerCancel = () => {
		showPicker.value = false;
	};
	// 弹出popup
	const handleFieldClick = () => {
		showPicker.value = true;
	};
</script>
<style scoped lang="scss">
	.vantPicker .van-cell {
		align-items: center;
		font-size: 16px;
	}
</style>
